<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework2手机商城</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    #box {
        /* height: 780px; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 2px solid #efefef;
    }
    .box2{
        border: 2px solid #efefef;
    }
    .box3{
        float: right;
        width: 70%;
        padding-top: 0%;
        display: flex;
        flex-wrap: wrap;
    }
    .goods {
        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 当前行的侧轴(纵轴)方向上的对齐方式 */
        /* justify-content: center; */
        /* 居中排列 */
        border: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        box-sizing: border-box;
        /* padding-left: 100px; */
    }
    .more {
        width: 25px;
        height: 25px;
    }
</style>
<body>
    <!-- 马人和209001115 -->
    <div id="app"></div>
    <template id="root">
        <div id="box">
            <span style="font-size:x-large;margin-left: 50px;">手机</span>
        <span style="padding-left: 1450px;">查看更多</span>
        <img src="images/按钮-箭头向右_o.png" class="more">
            <div class="box2">
                <img src="images/ad1.png">
            </div>
            <div class="box3">
                <!-- 遍历循环数据 -->
                <div v-for="item in phoneList" class="goods">
                    <img :src="item.img">
                    <span style="font-size: larger;">{{item.title}}</span>
                    <span style="color: rgb(197, 202, 205);">{{item.des}}</span><br>
                    <span style="color:orange">{{item.price}}</span>
                </div>
            </div>
        </div>
    </template>
</body>
<script>
    const app = Vue.createApp({
        template: '#root',
        data() {
            return {
                phoneList: [
                    { id: '100081', img: 'images/phone1.png', title: 'Redmi K50 电竞版', des: '全线拉满的冷血旗舰', price: '3299元起' },
                    { id: '100082', img: 'images/phone2.png', title: 'Xiaomi 12 Pro', des: '全新骁龙8|2k AMOLED屏幕', price: '4699元起' },
                    { id: '100083', img: 'images/phone3.png', title: 'Xiaomi 12', des: '全新视觉|5000万主摄', price: '3699元起' },
                    { id: '100084', img: 'images/phone4.png', title: 'Xiaomi 12 X', des: '骁龙870|5000万主摄', price: '2999元起' },
                    { id: '100085', img: 'images/phone5.png', title: 'Xiaomi 11 青春活力版', des: '轻薄5G|内外皆出彩', price: '1899元起' },
                    { id: '100086', img: 'images/phone6.png', title: 'Redmi Note 11 Pro系列', des: '三星AMOLED高刷屏', price: '1799元起' },
                    { id: '100087', img: 'images/phone7.png', title: 'Redmi Note 11 5G', des: '5000mAh大电量', price: '1199元起' },
                    { id: '100088', img: 'images/phone8.png', title: 'Redmi Note 11 4G', des: '5000mAh大电量', price: '969元起' },
                ]
            }
        }
    })
    app.mount('#app')
</script>

</html>